<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="ss">当你对她（他<span>产生不了价值的时候，</span> 你对她（他）来说不就那么重要了。她可是追求“‘物质美’和‘心灵美’”的完美女孩，当你的经济能力满足不了她日渐成熟的欲望和需求时，她会亲自撕下“女朋友”的甜蜜可爱虚假人设，捅破男女关系的窗纱，化身冷酷无情的行兽将你忘记，继续寻找目标之旅。
    不尽然啊 不尽然啊</div>
  <p> 其实，每个人包括你我都一样，当你在痛诉她的无情无义的时候，感叹自己被伤害。同时，自己也在加害自己或者他人。</p>
<div class="f">
    <div class="ff">
        绝对定位1
    </div>
    <div class="fff">
        绝对定位2
    </div>
</div>
<div class="gud">固定定位</div>
</body>
<style>
    .ss{
        background-color: aqua;
        position: relative;
        top: 10px;
        left: 3em;
    }
    span{
        position: relative;/*定位*/
        background-color: blue;
        top: -1em;
        left: -1em;
    }
    .f{
        width: 200px;
        height: 200px;
        border: 1px red solid;
        position: relative;/*ff定位必需前一个定位*/
    }
    .ff{
       /* left: 30px;
       bottom: 1em;*/
        position: absolute;
        background-color: yellow;
        z-index: -10;
    }
    .fff{
        z-index:100 ;
    }
    .gud{
        position: fixed;
        right: 2em;
        bottom: 3em;
    }
  
</style>
</html>